<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 700px;height:300px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    var dts=[];
    var homeCounts=[];
    var goodDetailCounts=[];
    var goodDetail2cartConvertRatios=[];
    var cart2orderConvertRatios=[];
    var order2paymentConvertRatios=[];

    var cartCouns=[];
    var orderCounts=[];
    var paymentAmounts=[];


    $.ajax({
        type: "get",
        url: "/useractioncount/list",
        contentType: "application/json",
        success: function (res) {
            console.log("====res：=====")
            console.log(res);
            for (var i = 0; i < res.length; i++) {
                dts.push(res[i].dt);
                homeCounts.push(res[i].homeCount);
                goodDetailCounts.push(res[i]. goodDetailCount);
                goodDetail2cartConvertRatios.push(res[i].goodDetail2cartConvertRatio);
                cart2orderConvertRatios.push(res[i].cart2orderConvertRatio);
                order2paymentConvertRatios.push(res[i].order2paymentConvertRatio);
                cartCouns.push(res[i].cartCoun);
                orderCounts.push(res[i].orderCount);
                paymentAmounts.push(res[i].paymentAmount);
            };

            option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['homeCount', 'goodDetailCount', 'goodDetail2cartConvertRatio', 'cart2orderConvertRatio', 'order2paymentConvertRatio','cartCoun','orderCounts','paymentAmount']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:dts
                },
                yAxis: {
                    type: 'value'
                },

                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                        color:function(params) {
                            //自定义颜色
                            var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                series: [

                    {
                        name: 'homeCount',
                        type: 'line',
                        stack: 'Total',
                        data: homeCounts
                    },
                    {
                        name: 'goodDetailCount',
                        type: 'line',
                        stack: 'Total',
                        data: goodDetailCounts
                    },
                    {
                        name: 'goodDetail2cartConvertRatio',
                        type: 'line',
                        stack: 'Total',
                        data: goodDetail2cartConvertRatios
                    },
                    {
                        name: 'cart2orderConvertRatio',
                        type: 'line',
                        stack: 'Total',
                        data: cart2orderConvertRatios
                    },
                    {
                        name: 'cartCoun',
                        type: 'line',
                        stack: 'Total',
                        data: cartCouns
                    },
                    {
                        name: 'orderCount',
                        type: 'line',
                        stack: 'Total',
                        data: orderCounts
                    },
                    {
                        name: 'paymentAmount',
                        type: 'line',
                        stack: 'Total',
                        data: paymentAmounts
                    },
                    {
                        name: 'order2paymentConvertRatio',
                        type: 'line',
                        stack: 'Total',
                        data: order2paymentConvertRatios
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    });

</script>
</body>